<template>
    <div class="qilin-calendarDay">
		<div class="qilin-calendarDay-item"
			v-for="(item,index) in dates" :key="index"
            :style="{
                backgroundColor:item.isSelectedWeek ? '#dae9ff' : '',
                borderRadius:(index%7 === 0) ? '8px 0 0 8px' : (index%7 === 6) ? '0 8px 8px 0' : ''
            }"
		>
			<div
				:class="[
					'qilin-calendarDay-item-date',
					item.isSelected ? 'isSelected' : ''
				]"
				:style="{
					height:porpsValue.cellHeight+'px',
					width:porpsValue.cellHeight+'px',
					color:item.type === 'cur' && !getWeekday(item) ? 'rgba(0,0,0,0.85)' : 'rgba(0,0,0,0.45)',
					background:item.isSelected ? porpsValue.dateActiveColor : ''
				}"
				@click="selectDate(item,index)"
			>
				<div class="qilin-calendarDay-item-date-number">{{item.date}}</div>
				<div class="qilin-calendarDay-item-date-isToday"
					v-if="item.isToday"
					:style="{
						backgroundColor:porpsValue.dateActiveColor
					}"
				></div>
				<div
					:class="[
						'qilin-calendarDay-item-date-status',
						item.status === 1 ? 'is-normal' :
						item.status === '0' ? 'is-abnormal' :
						item.status === '2' ? 'is-none' : ''
					]"
				></div>
			</div>
		</div>
    </div>
</template>

<script setup>
import {ref,computed,defineProps,defineEmits,reactive,onMounted} from "vue";

/*
    数据变量定义区域
*/


/*
    计算属性等代码区域
*/
// 接收来自父组件的传参
const porpsValue=defineProps({
	dates:{ //日期集合
		type:Array,
		default(){
			return [];
		}
	},
	cellHeight:{ //一列的高度和宽度
		type:Number,
		default:75
	},
	dateActiveColor:{ //日期选中的颜色
		type:String,
		default:"#1577FF"
	},
	swiperMode:{ //日历显示模式
		type:String,
		default:"open"
	}
});
// 暴露父组件自定义方法
const emits=defineEmits(["selectDate"]);

// 判断该日期是否属于周末还是工作日方法
const getWeekday=computed(()=>{
	return (item)=>{
		return [0,6].includes(new Date(item.year+"-"+item.month+"-"+item.date).getDay());
	};
});


/*
    逻辑脚本代码区域
*/
// 选择某个日期事件监听
const selectDate=(dateItem,dateIndex)=>{
	emits("selectDate",dateItem,dateIndex);
};



/*
    生命周期等代码区域
*/

</script>

<style lang="scss" scoped>
.qilin-calendarDay{
	display:flex;
	flex-flow:row wrap;
	justify-content:space-between;
	>.qilin-calendarDay-item{
		width:calc(100% / 7);
		margin-top:12px;
		>.qilin-calendarDay-item-date{
			position:relative;
			text-align:center;
			font-size:16px;
			color:rgba(0,0,0,0.85);
			border-radius:12px;
			display:flex;
			flex-flow:column nowrap;
			align-items:center;
			justify-content:center;
			margin:0 auto;
            cursor:pointer;
			&.isSelected{
				color:#fff !important;
                // background: linear-gradient( 180deg, #82B4FF 0%, #0066FF 100%);
			}
			>.qilin-calendarDay-item-date-number{
				margin-top:6px;
				font-weight:bolder;
			}
			>.qilin-calendarDay-item-date-isToday{
				width:100%;
				height:100%;
				position:absolute;
				top:0;
				left:0;
				border-radius:50%;
				opacity:0.5;
				z-index:-1;
			}
			>.qilin-calendarDay-item-date-status{
				width:4px;
				height:4px;
				border-radius:50%;
				background-color:#fff;
				margin-top:4px;
				&.is-late,&.is-early{
					background-color:#FF9901;
				}
				&.is-range{
					background-color:#13C197;
				}
				&.is-normal{
					background-color:$danger-text-color;
				}
				&.is-abnormal{
					background-color:#FF9901;
				}
				&.is-none{
					background-color:rgba(13,42,144,0.3);
				}
			}
		}
	}
}
</style>
